<template>
  <div class="box">
    <!-- <div style="width: 100%;">
        <h1 style="color: #fff;">快来交朋友吧！！！</h1>
    </div> -->
    <div style="margin-top: 0px;margin-left: 250px;">
      <el-input placeholder="请输入查找的用户姓名或兴趣爱好(多个兴趣爱好用,号隔开)" :onafterpaste="this.search=this.search.replace(/，/g,',')"
        :οnkeyup="this.search=this.search.replace(/，/g,',')" v-model="search" class="input-with-select">
        <el-button slot="append" type="primary" plain icon="el-icon-search" @click="searchButton"></el-button>
      </el-input>
    </div>
    <hr style="border: 1px #031a4841 solid;margin: 20px;width: 100%;">
    <div style="width: 100%;height: 490px;padding: 0px 20px 0px 20px;">
      <div style="width: 100%;display: flex;align-items: center;">
        <svg t="1711527226793" class="icon" viewBox="0 0 1522 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4180" width="50" height="50">
          <path
            d="M 1475.13 304.358 L 1299.49 135.35 C 1206.43 22.3789 1007.72 25.7113 1007.72 25.7113 C 772.776 48.9618 734.683 211.766 734.683 211.766 s -29.2745 139.195 48.9618 167.675 l 10.9972 150.474 c 47.3725 260.19 304.563 260.01 304.563 260.01 c 125.122 3.48628 199.821 -32.7096 240.733 -63.8041 c 0 0 151.346 -156.575 172.827 -260.677 c 34.7859 -94.1297 -37.6314 -161.087 -37.6314 -161.087 Z M 1215.18 723.353 h -0.051269 a 255.499 255.499 0 0 1 -91.0023 16.7137 c -144.091 0 -260.856 -116.765 -260.856 -260.831 v -137.913 c 1.5637 -41.5278 46.424 -59.8052 96.4368 -25.7883 c 0 0 125.558 112.279 252.345 185.388 c 0 0 39.5796 21.5842 75.9549 47.193 h 0.051269 c 7.33145 5.17816 14.3553 10.4845 21.0715 15.8165 c 22.8659 24.1989 39.9641 76.365 -93.9502 159.421 Z M 446.578 11.4586 s -169.418 20.8664 -345.527 110.587 c 0 0 -99.7949 49.8334 -99.7436 122.943 c 0 0 -23.1992 289.08 126.301 438.58 c 0 0 66.4958 112.305 282.44 106.332 c 0 0 245.27 0.205076 292.617 -260.01 V 230.633 c -0.025634 0 17.6878 -291.182 -256.088 -219.175 Z m 199.359 467.803 c 0 144.066 -116.765 260.831 -260.831 260.831 S 124.301 623.327 124.301 479.262 v -86.9777 c 0.307613 -16.97 -4.63983 -75.7242 76.6214 -87.4904 h 368.828 s 76.2112 0 76.2112 93.053 v 81.415 Z M 392.181 821.251 c -242.066 -0.025634 -259.703 165.035 -259.703 165.035 c -3.20431 40.8613 32.8377 37.657 32.8377 37.657 h 459.446 c 39.6821 -2.40964 21.9944 -61.6765 21.9944 -61.6765 c -50.4486 -146.629 -254.576 -141.015 -254.576 -141.015 Z m -202.025 150.602 s 34.4527 -100.128 202.281 -100.128 s 202.281 100.128 202.281 100.128 H 190.156 Z M 1117.76 821.251 c -242.066 -0.025634 -259.703 165.035 -259.703 165.035 c -3.20431 40.8613 32.8377 37.657 32.8377 37.657 h 459.446 c 39.6821 -2.40964 21.9944 -61.6765 21.9944 -61.6765 c -50.4742 -146.629 -254.576 -141.015 -254.576 -141.015 Z m -202.025 150.602 s 34.4527 -100.128 202.281 -100.128 s 202.281 100.128 202.281 100.128 H 915.739 Z"
            fill="#d81e06" p-id="4181"></path>
        </svg>
        <h2 style="color: #fff;margin-left: 3px;">交友厅</h2>
      </div>
      <div class="infinite-list-wrapper" lazy v-infinite-scroll="load" infinite-scroll-disabled="disabled"
        style="width: 103%;height: 523px;margin-left: -10px; overflow: auto;display: flex;flex-wrap: wrap;justify-content: flex-start">
        <div class="card" style="padding: 20px;display: flex;position: relative;" v-for="item in usersList"
          :key="item.id" @click="open(item)">
          <div style="width: 25%;position: relative;height: 150px;">
            <img :src="item.uphoto" style="margin-top: 20px; border-radius: 50%;" width="100" height="100">
            <div
              style="position: absolute; top: 90px;left: 70px; border-radius: 50%; background-color: #fff;border:3px solid #18baff;width: 25px;height: 25px;text-align: center;">
              <svg style="margin-top: 3px;" v-if="item.usex === '男'" t="1711538067439" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25260" width="22"
                height="22">
                <path
                  d="M441.792 923.776c-88 0-175.968-33.152-243.52-100.736a342.4 342.4 0 0 1-100.736-243.52 342.4 342.4 0 0 1 100.736-243.552 342.4 342.4 0 0 1 243.52-100.736 342.4 342.4 0 0 1 243.552 100.736c133.888 133.888 133.888 353.216 0 487.072-66.304 67.584-155.552 100.736-243.52 100.736z m0-613.312a267.264 267.264 0 0 0-189.984 79.04A267.264 267.264 0 0 0 172.8 579.52c0 71.392 28.032 138.976 79.04 189.984 104.576 104.544 275.424 104.544 379.968 0 104.576-104.576 104.576-275.424 0-379.968a267.264 267.264 0 0 0-189.984-79.072z m443.744 59.936a37.568 37.568 0 0 1-38.24-38.272V174.08h-158.112a37.568 37.568 0 0 1-38.272-38.272c0-21.664 16.576-38.24 38.272-38.24h195.072c21.664 0 38.24 16.576 38.24 38.24v196.352c1.28 20.416-16.576 38.272-36.96 38.272z"
                  fill="#2999FF" p-id="25261"></path>
                <path
                  d="M668.768 390.784c-10.208 0-19.136-3.84-26.784-11.456-15.296-15.296-15.296-39.52 0-53.568l216.768-216.768c15.296-15.296 39.52-15.296 53.568 0 15.296 15.296 15.296 39.52 0 53.568l-216.768 216.768c-7.68 7.648-16.576 11.456-26.784 11.456z"
                  fill="#2999FF" p-id="25262"></path>
              </svg>
              <svg style="margin-top: 1px;" v-if="item.usex === '女'" t="1711539508031" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26273" width="22"
                height="22">
                <path
                  d="M625.2 97.7c-166.5 0-301.4 134.9-301.4 301.4 0 66.7 21.7 128.3 58.4 178.2L288.8 670 176.2 556.5c-17.9-18.1-47.1-18.2-65.1-0.3-18.1 17.9-18.2 47.1-0.3 65.1l112.6 113.5L111 846.4c-18.1 17.9-18.2 47.1-0.3 65.1 9 9.1 20.8 13.6 32.7 13.6 11.7 0 23.5-4.5 32.4-13.4l112.4-111.5 111.5 112.4c9 9.1 20.8 13.6 32.7 13.6 11.7 0 23.5-4.5 32.4-13.4 18.1-17.9 18.2-47.1 0.3-65.1L353.7 735.4l93.7-93c49.9 36.5 111.3 58.1 177.8 58.1 166.5 0 301.4-134.9 301.4-301.4S791.7 97.7 625.2 97.7z m148 449.4c-39.5 39.5-92.1 61.3-148 61.3s-108.5-21.8-148-61.3-61.3-92.1-61.3-148 21.8-108.5 61.3-148 92.1-61.3 148-61.3 108.5 21.8 148 61.3 61.3 92.1 61.3 148-21.8 108.5-61.3 148z"
                  fill="#CF78AD" p-id="26274"></path>
              </svg>
            </div>
          </div>
          <div style="width: 75%;margin-top: 0px;position: relative;height: 150px;">
            <h2 style="color: #fff;font-family: 方正楷体;">{{ item.uname }}</h2>
            <el-tag v-for="item2 in item.uhobby.split(',')"
              :type="Math.floor(Math.random() * 100) % 2 == 0 ? 'success' : Math.floor(Math.random() * 100) % 3 == 0 ? '' : Math.floor(Math.random() * 100) % 4 == 0 ? 'warning' : 'danger'"
              effect="plain" :key="item2" color="#ffffff" style="margin: 5px 5px 5px 0px;">
              {{ item2 }}
            </el-tag>
            <br>
            <el-tag style="margin: 5px 5px 8px 0; padding: 0 5px 0 5px;">年龄:{{ item.uage }}岁</el-tag>
            <div
              style="width: 98%;height: 50px;background-color: rgba(19, 23, 104, 0.100);color: #fff;border: 1px solid rgba(19, 23, 104,0.190); padding:5px;font-family: 宋体;font-size: 18px;">
              {{ item.signature }}
            </div>
          </div>

          <div style="position: absolute;bottom: 3px;right: 8px;color: #cecece;">
            信誉值:{{ item.ureputation }}
          </div>
        </div>
        <p style="width: 100%;text-align: center;color: #fff;font-size: 18px;height: 40px;" v-if="loading">加载中...</p>
        <p style="width: 100%;text-align: center;color: #fff;font-size: 18px;height: 40px;" v-if="noMore">没有更多了</p>
      </div>
    </div>
    <el-drawer v-if="drawer" :visible.sync="drawer" :with-header="false">
      <div style="width: 100%;height:100%;background-color: #fff;">
        <div style="width: 100%;height: 250px; position: relative;z-index: 1;">
          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.d95XU9rPpliLu_FNqV9hHQHaFN?rs=1&pid=ImgDetMain" alt=""
            width="100%" height="250">
        </div>
        <div
          style="width: 95.4%;height: 500px;padding: 15px 10px 0 10px;position: relative; z-index: 2; border-radius: 3% 0 0 3%;margin-top: -15px;background-color: #fff;">
          <div style="width: 100%;height: 200px;display: flex;">
            <div style="width:175px;height: auto;">
              <img :src="user.uphoto" alt="" width="170px" height="170px" style="border-radius: 5px">
            </div>
            <div style="width: 100%;height: 200px;margin-top: -3px;margin-left:7px;">
              <div style="width: 100%;height: 35px; font-family:楷体; font-size: 30px;">
                {{ user.uname }}
              </div>
              <div v-if="drawer"
                style="width: 250px;height: auto;padding: 0 0 0 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <el-tag v-for="(item, index) in user.uhobby.split(',')"
                  :type="Math.floor(Math.random() * 100) % 2 == 0 ? 'success' : Math.floor(Math.random() * 100) % 3 == 0 ? '' : Math.floor(Math.random() * 100) % 4 == 0 ? 'warning' : 'danger'"
                  effect="plain" :key="index" color="#ffffff" style="margin: 5px 5px 5px 0px;">
                  {{ item }}
                </el-tag>
              </div>
              <el-tag effect="dark" type="danger" style="margin: 0 5px 5px 3px; padding: 0 5px 0 5px;">
                年龄:{{ user.uage }}岁</el-tag>
              <p style="margin-bottom: 3px;"><i class="el-icon-location-information"></i> {{ user.uaddress }}</p>
              <svg t="1711941948097" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10928" width="30" height="30">
                <path
                  d="M725.800421 387.395368c65.482105 0 122.287158 45.056 135.168 107.034948l59.392 227.435789a36.648421 36.648421 0 0 1-7.006316 32.336842 39.073684 39.073684 0 0 1-30.181052 14.767158l-52.116211 0.269474a5059.098947 5059.098947 0 0 0-28.56421 85.423158 37.834105 37.834105 0 0 1-36.163369 25.869474h-80.949895a38.049684 38.049684 0 0 1-36.486736-26.031158c-9.970526-30.935579-21.018947-62.841263-28.456421-84.453053-22.959158-0.161684-52.062316-0.700632-52.062316-0.700632a39.397053 39.397053 0 0 1-30.288842-14.982736 37.295158 37.295158 0 0 1-6.844632-32.444632l59.823158-229.591579c12.395789-59.823158 69.254737-104.933053 134.736842-104.933053zM241.987368 358.561684c130.748632-40.582737 263.006316 56.697263 263.006316 181.625263v135.383579c0 15.090526-12.665263 27.486316-28.240842 27.486316h-52.547368v167.073684a10.401684 10.401684 0 0 1-10.563369 10.24H192.404211a10.401684 10.401684 0 0 1-10.509474-10.24v-167.073684H113.717895a12.449684 12.449684 0 0 1-12.665263-12.341895v-138.24c0-87.309474 55.727158-167.558737 140.880842-193.913263z m491.250527-200.272842c64.673684 0 117.382737 51.415579 117.382737 114.580211s-52.655158 114.526316-117.382737 114.526315-117.382737-51.361684-117.382737-114.526315c0-63.164632 52.655158-114.580211 117.382737-114.580211z m-430.618948-38.265263c64.781474 0 117.436632 51.415579 117.436632 114.58021 0 63.272421-52.655158 114.580211-117.382737 114.580211s-117.382737-51.415579-117.382737-114.580211 52.655158-114.526316 117.382737-114.526315z"
                  fill="#00ADEE" p-id="10929"></path>
              </svg>
              <p style="margin-top: -30px;margin-left: 40px;">{{ user.usex }}</p>
            </div>
          </div>
          <div style="width: 100%;height: 400px;border: 1px saddlebrown solid;position: relative;">
            个性签名 <br>
            <el-input style="font-size: 16px;" type="textarea" placeholder="请输入内容" v-model="user.signature"
              :readonly="true" :autosize="{ minRows: 4, maxRows: 4 }">
            </el-input>
            <hr>
            <br>
            <div style="width: 100%;text-align: center;">
              <el-progress type="circle" :percentage="percentage" :format="format"></el-progress>
              <p style="font-size: 18px;color: red;"
                v-if="myUser[0].ustatusID === 0 ? percentext = '登录后享更多权限' :percentage<=20 && percentage>0 ? percentext = '你们好像不太适合呢' : percentage<=50 && percentage>20 ? percentext='你们或许可以是朋友呢':  percentage<=80 && percentage>50 ? percentext='你们或许可以是非常好的好朋友呢': percentage<=100 && percentage>80 ? percentext='你们真是天生的一对呢': percentext='数据有误'">
                {{ percentext }}
              </p>
            </div>
            <div style="width: 100%;position: absolute;bottom: 0;">
              <el-button plain style="width: 48.8%;font-size: 17px;">发送信息</el-button>
              <el-button type="primary" style="width: 48.8%;font-size: 17px;" @click="insertFriend">添加好友</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- <drowerCom /> -->
  </div>
</template>

<script>
import axios from 'axios'
// import drowerCom from './drowerCom.vue'
export default {
  data () {
    return {
      myUser: [JSON.parse(sessionStorage.getItem('user'))], // 个人信息List
      usersList: [{}], // 好友List
      count: 10,
      countNumber: 0,
      loading: false,
      search: '',
      drawer: false,
      user: [], // 查看详细信息List
      firendData: [], // 好友申请信息
      percentext: '',
      percentage: 0

    }
  },
  computed: {
    noMore () {
      return this.count >= this.countNumber
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  components: {
    // drowerCom
  },
  methods: {
    load () {
      this.loading = true
      if (this.count < this.countNumber) {
        setTimeout(() => {
          this.count += 10
          this.getFriend()
          this.loading = false
        }, 1500)
      }
    },
    open (item) {
      this.user = item
      this.drawer = true
    },
    format (percentage) {
      const tex = '匹配度'
      return tex + '\n' + percentage + '%'
    },
    getFriend () {
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/user/users',
        method: 'GET',
        params: {
          uid: this.myUser[0].uid,
          uhobbys: this.myUser[0].uhobby,
          count: this.count,
          search: this.search
        }
      }).then((res) => {
        this.countSize()
        this.usersList = res.data.data
      })
    },
    countSize () {
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/user/countNumber',
        method: 'GET'
      }).then((res) => {
        this.countNumber = res.data.data
        console.log(this.countNumber)
      })
    },
    searchButton () {
      this.count = 10
      this.countSize()
      this.getFriend()
    },
    insertFriend () {
      if (this.myUser[0].ustatusID === 0) {
        this.$message('登录后享更多权限')
      } else {
        axios.defaults.withCredentials = true

        axios({
          url: 'http://152.136.143.223:9091/user/addFriend',
          method: 'POST',
          data: {
            uid: this.myUser[0].uid,
            accept: this.user.uid
          }
        }).then((res) => {
          if (res.data.data > 0) {
            this.$notify({
              title: '成功',
              message: '您已发送好友申请',
              type: 'success'
            })
          } else {
            this.$notify({
              title: '信息',
              message: '登录后享更多权限'
            })
          }
        })
      }
    }
  },
  beforeMount () {
    this.getFriend()
  },
  watch: {
    drawer () {
      let count = 0
      this.percentage = 0
      this.user.uhobby.split(',').forEach(res => {
        this.myUser[0].uhobby.split(',').forEach(MyRes => {
          if (MyRes === res) {
            count += 0.9
          }
        })
      })
      const difference = this.user.uhobby.split(',').length - count
      if (difference <= 1) {
        this.percentage = 100
      } else if (difference <= 2) {
        this.percentage = 80
      } else if (difference <= 5) {
        this.percentage = 50
      } else if (difference > 5) {
        this.percentage = 20
      }
      if (this.myUser[0].ustatusID === 0) {
        this.percentage = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 30px 40px 0px 50px;

  .input-with-select {
    width: 50%;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
    // color: #1b244eae;
  }

  div {
    .infinite-list-wrapper {
      .card {
        width: 43%;
        height: 190px;
        margin: 18px;
        padding: 10px;
        border: #1e2a3f 1px solid;
        border-radius: 10px;
        cursor: pointer;
        background: rgba(19, 23, 104, 0.096);
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to bottom, rgba(19, 23, 104, 0.096), #fcfcfc00);
        background: linear-gradient(to bottom, rgba(19, 23, 104, 0.096), #fcfcfc00)
          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }

      .card:hover {
        border: 1px white solid;
      }
    }
  }
}
</style>
